<template>
	<div id="app">
		<div id="aplayer"></div>
	</div>
</template>

<script>
	import APlayer from "APlayer"; // 引入音乐插件
	import "APlayer/dist/APlayer.min.css"; // 引入音乐插件的样式
	export default {
		props: ["autoplay"],
		name: "App",
		data() {
			return {
				audio: [],
				info: {
					fixed: true, // 不开启吸底模式
					listFolded: true, // 折叠歌曲列表
					autoplay: this.autoplay, // 开启自动播放
					preload: "auto", // 自动预加载歌曲
					loop: "all", // 播放循环模式、all全部循环 one单曲循环 none只播放一次
					order: "list", //  播放模式，list列表播放, random随机播放
				},
			};
		},
		created() {},
		methods: {
			initAudio() {
				// 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
				const ap = new APlayer({
					container: document.getElementById("aplayer"),
					audio: this.audio, // 音乐信息
					...this.info, // 其他配置信息
				});
			},
			getAudio() {
				// const uid =localStorage.getItem()
				this.$api.home.getMusicList(this.$store.state.UserInfo.id).then(res => {
					if (res.code == 200) {
						this.audio = res.data
						// 初始化播放器
						this.initAudio();
					} else {
						this.$message.waring("出现错误，请联系管理员！")
					}
				})
			},
			closeAudio() {
				this.audio = []
				this.initAudio()
			},
			// 在没有登录的情况下
			getNoTokenList() {
				let obj = {
					id: 21,
					name: "天空之城",
					artist: "未知",
					url: "http://music.163.com/song/media/outer/url?id=1947208581.mp3",
					cover: "http://p2.music.126.net/O-G03h3Y18Hb75ZzFXrxXg==/109951167515869204.jpg",
					lrc: null,
					theme: "rgb(127, 218, 180)",
					createTime: 1664433494000,
					uId: "1",
					uid: "1"
				}
				this.audio = []
				this.audio.push(obj)
				this.initAudio()
			}
		}
	};
</script>

<style lang="less" scoped>
	#app {
		width: 100%;
		height: 100%;

		#aplayer {
			width: 480px; // 定个宽度
		}
	}
</style>
